1. Testing Revisions - CSS 
2. HTMLS5 


Testing Revisions - CSS 
The module presents the concepts used in the CSS programming language. 


Introduction 


Cascading Style Sheets (abbreviated CSS) are used to describe how 
(X)HTML or XML text is to be presented. This module is currently a 
commented link list of important entry points for reading about CSS. 


This module gives a simple example how a CSS style sheet works. 
Content of this module 


e CSS rules 

e Internal and external style sheets 
e Reference 

e Tutorial 

e Layout with CSS 

e Validator 

« CSS 3 

e Implementation 

e CSS versus XSL 

e CSS in mobile devices 

e Media queries 

e Frameworks 

e Web fonts 

e XHTML plus CSS to PDF 
e Further Reading 


CSS rules 


A CSS file consists of statements which are either at-rules or rule sets (often 
just called rules). A rule set (rule) consists of a selector and a declaration 
block which contains one or more declarations (more see CSS 2.1 
specification). A declaration contains a property and a value (e.g. "color" 
and "green"), see example below. These rules describe how the formatting 
should take place. 


Below are some sample rules. In the first part one or several selectors are 
given and in the second part there are one or more attribute-value pairs 
enclosed by curly brackets. 


/* Sample rules */ 
hi, h2 {color: green} 
#box {width: 70%} 
.topic {color: red} 
Selector types 


e hi and h2 are tag selectors 
e #box is a selector for an identification 
e . topic isa selector for a class 


A series of tests for selectors. 


Internal and external style sheets 


A style sheet may reside in a separate file (external style sheet) or within 
an (X)HTML file (internal style sheet). 
External style sheet 


<head> 

<link rel="stylesheet" type="text/css" media="Sscreen, 
projection, handheld, print" href="css/general.css" /> 
<link rel="stylesheet" type="text/css" media="print" 
href="css/ourPrintStyleSheet.css" /> 

</head> 


In the case of the code above taken from a HTML file we load a general 
style sheet for different kinds of output media called general.css anda 
specific one for printing (OurPrintStyleSheet.css). The style sheet 
for printing adds and overrides some rules to put the content onto paper. 
Internal stylesheet (HTML) 


<style type="text/css"> 
hi £{ 
color: green; 
} 
</style> 
Internal stylesheet (XHTML) 
<style type="text/css"><! [CDATA[ 
hi £ 
color: green; 


t 
]]></style> 


@import rule 
The @import rule (ref.) allows you to import rules from another style 
sheet into your current one. For an example see ‘web fonts’ below. 


Reference 

CSS 2.1 specification (implemented by most browsers); an index 

All W3C GSS standards and drafts 

The link above includes the documents commonly called CSS 3 which 


consists of different modules. They are implemented to various degrees in 
the current browsers. 


Tutorial 
w3.org: Starting with HTML and CSS (basic introduction) 
Complete course with interactive exercises w3schools 


Searching for the key words CSS Cheat sheet provides helpful links if 
you have learned CSS in the past. This brings up for example this list which 
leads to 30 examples . 


Layout with CSS 


For doing layout with CSS the 'position' attribute and the box model are 
used. In the past this was difficult because the box model implemented by 
the Internet Explorer (IE) differed from the web standard and from the box 
model implemented by other browsers. In the meantime the Internet 
Explorer supports the standard W3C box model so using CSS in modern 
browsers is made easier as there needs not to be a 'switch' anymore for IE 
and the other browsers. CSS 3 introduces the box-SiZing property 
which allows to set how the box size is calculated (https://css- 
tricks.com/box-sizing/). 

CSS box model 


CSS Box Model 


margin 


padding 


The W3C standard box model 


How to position elements 
http://learnlayout.com/position.html 


The default is that elements are positioned Static. This means that the 
element is not positioned in special way. It is in the normal flow of 
elements. 


relative 


relative behaves the same as static unless you add some extra properties. 


<div class="relative2"> 
Setting the top, right, bottom, and left properties of a relatively- 


positioned element will cause it to be adjusted away from its 
normal position. Other content will not be adjusted to fit into any 
gap left by the element. 


Validator 


A validator checks if a CSS file contains no erroneous CSS selectors and 
rules. W3C validator 


CSS 3 


CSS3 (CSS level 3) builds on CSS level 2. Unlike CSS2 which is a single 
specification document CSS3 is devided into several separate 


recommendations documents. They are called "modules". See table of 
specifications of the W3C. 


News about the implementation of the new features css3.info. Web site 
which tests CSS3 implementation in browsers. 


Interactive construction of CSS3 code (e.g. rounded comers, shadow, etc) 
css3please.com 


¢ Media queries (W3 recommendation June 2012); media query. 
examples (cnx module) 

e Selectors level 3 ( W3C recommenation, Sept 2011), tests 

e Multicolumn Layout e.g. column-width: 20em; 

e Rounded Corners (exploration / code generator) 

e Web Fonts (see example below) 

e Text Wrapping (CSS Text Module Level 3) 

e Text Stroke 

e Transitions 

e 2d Transforms (usage example to create 3d effect) 

e Animations (examples) 

e Gradients 


Implementation 


e http://www.guirksmode.org/compatibility.html 

e http://www.caniuse.com/ answers in which web browsers a particular 
CSS selecter or attribute may be used. 

e Gecko (used in Firefox) CSS support chart 


Debugging 


There is an add-on called Firebug to the Firefox web browser which helps 
to debug CSS style sheets. It helps as well to learn about CSS 
http://getfirebug.com/css. 


InternetExplorer 8, 9 and 10 give access to developer tools (Manual) 
through the F12 key. 


CSS versus XSL 


Why does W3C recommend two different style languages? Which one 
should you use? Basically, the rule can be summarized very succinctly: Use 
CSS when you can, use XSL when you must. 
http://www.w3.org/Style/CSS-vs-XSL 


CSS in mobile devices 


CSS mobile (current status) aims at describing a subset of CSS useful for 
mobile devices. 


Media queries 


CSS media queries (W3C spec) allow that style rules are only applied to 
specific output media, i.e. screen, print, handheld or other. They can as well 
depend on conditions like display width. The following example 
demonstrates the idea 


@media (max-width: 320px) { 
/* rules for mobile devices go here */ 
i 


@media (min-width: 321px) { 
/* rules for devices with larger 
screens go here */ 


More about media queries; collection of example sites 


Use of media queries to implement a responsive navigation, i.e. a 
navigation which works on desktop or laptop computers where there is a 
cursor and on touch devices (mobile phones, tablets). 


Frameworks 


A CSS framework is one or more CSS files which include style declarations 
on which you can build by either extending or replacing them. The aim is 
that you do can rely on ready-made designs and do not need to create 
workarounds for the browser inconsistencies. 


Skeleton: Responsive boilerplate 


Bootstrap Bootstrap is a popular HTML, CSS, and JS framework for 
developing responsive projects. 


http://purecss.io/ -- a set of small, responsive CSS modules; see also 
https://smacss.com/ (Scalable and Modular Architecture for CSS). 


Web fonts 


Current browsers may load fonts front the web (@f ont - face property) 
and thus support the font part of CSS 3. 


Google font service 

Google provides a service from which you can choose free fonts. It 
generates some code which you can add to your website. They as well 
provide a font API and host a repository with free fonts. So you might add 
the Gentium font by adding an import rule at the beginning of your style 
sheet 


@import url(http://fonts.googleapis.com/css? 
family=Gentium+Basic&subset=latin, latin-ext); 


But you may as well copy a free font to a directory of your own website and 
serve it from there. For an example of loading a font see below. Gentium is 
a free font under the Open Font License (OFL). 


@font-face { 

font-family: Gentium; 

src: url(http://yoursite/fonts/Gentium. ttf); 
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p { font-family: Gentium, serif; } 


XHTML plus CSS to PDF 
e Printing a book with CSS (PrinceXML) 


e pd4ml (free for non-commercial use) 


Further Reading 


Useful coding techniques 


W3C CSS ‘Test Harness 


HTMLS5 

HTM.LS is the fifth revision of the HTML standard. It provides various 
enhancements and is still work in progress. This module provides links to 
information about HTMLS which lead you into the topic in-depth. 


Introduction 


The structure of a HTML5 document may be simpler than that of a HTML4 
document. There is only one document type <! DOCTYPE html>. Older 
browsers interpret this fine as they do not know about the HTML5 
document type and try to do the best they can to render the page. Newer 
browsers know how to interpret HTMLS. 


The Web Hypertext Application Technology Working Group (WHATWG) 
does not speak of HTMLS. They call it just HTML without a version 
number. 

Minimal document 


<!DOCTYPE htm1l> 

<html> 

<head> 

<title>The title of the document</title> 
</head> 


<body> 
The text ... 
</body> 


</html> Simple correct HTML5 template 
(http://www.w3.org/TR/html15/semantics.html#semantics) 


<?xml version="1.0" encoding="UTF-8"?> 
<html xmlns="http://www.w3.org/1999/xhtmL"> 
<head> 

<title>The title of the document</title> 
</head> 


<body> 
The text 
</body> 


</html> The same as above but in XHTML syntax 


HTMLS5 with CSS and JavaScript 


In the strict sense HTMLS5 is the follow-up specification to HTML4. But 
people often mean more when they talk about HTML5. HTMLS5S used as 
umbrella term includes extended functions of CSS (CSS3) and JavaScript 
(ECMAscript version 5). With this it is possible to write complete web 
applications in one file. 

Minimal template with CSS and JavaScript 


<?xml version="1.0" encoding="UTF-8"?> 
<html xml: lang="en" lang="en"> 
<head> 


<style><! [CDATA[ 


ht {color: red; 
} 


al 
</style> 


</head> 


<body> 


<hi>Beverages</h1i> 

<ul id="beverages"> 
<li>Coffee</1li> 
<li>Tea</1li> 
<1li>Milk</1li> 

</ul> 

<span id="note"></span> 


<script> 
<! [CDATA[ 


// JavaScript statements 
// This will be evaluated after the document has been loaded 
// making it possible to easily access DOM elements. 


var list = document.getElementById("beverages"); 

var listlength = list.children.length; 
console.log(listlength); 

var note = document.getElementById("note"); 
console.dir(note); 

note.textContent = listlength + " types of beverages"; 


]]> 


</script> 


</body> 
</html>Template in XHTML5 syntax demonstrating access to a DOM 
element 


View the XHTMLS template locally 

View the template in your browser. You then may save it and start changing 
it. Make sure it has the file extension . xhtml for IES to display a local file 
in IES mode. In addition Firefox and Opera still display it properly if the 
file name extension is . xm1. 

Comments 


e The document starts with a declaration that it is encoded as an XML 
file. 

e The root element is an <html>. ..</htm1l> node. It has two 
daughter nodes: <head>. . .</head> and <body>. . .</body>. 

e The head contains the style information. It is contained in <style 
type="text/css">...</style>. 

e The actual data to be displayed is in the body part. 

e The CDATA tells the XML parser to treat the following code as data. 
This means that wedges (<>) should not be considered 

e The JavaScript code shows the method getELementById to access 
the Document Object Model (DOM). All HTML elements are 
accessible this way. 

e The JavaScript code is executed once at the end of loading the file. 


¢ The children method gives back all HTML elements of a particular 
parent HTML Element. 

e console. log(listlength) and console.dir(note) may 
be used for debugging purposes. The output will be displayed on the 
console accessible for example in Firefox 9 through "Tools'//Web 
Developer'/‘Web Console’. Other browsers have similar tools. 

e This example contains all the CSS and JavaScript code. Most often 
this code is put into two separate files. Then two links in the main 
HTML file connect to them. 


Display in Firefox 9 with web console opened 


») Mozilla Firefox Eek) 


File Edit View History Bookmarks Tools Help 


{} file: {/#C:{Documents.. MLSCSSJavaScript. xml | we M 


<> | £) file:/{#C:{Documents and Settings/hirzel{My Documents/cnx/HTML5/MinimalHTMLSCSS JavaScript. xml ¢ | th 


\a Net | | a css | gjs >| | @ Web Developer -| Position er P| Clear x 

18:37:44.3 

18:37:44.4: 
4 


10 file:///C: /Documents®20and%20Settings/hirzel sMy%20Documents/cnx/HTMLS “Minimal HTMLSCSSJavaScript.xml «a 
- 3 MinimalH...xml:39 — 

Tv] (CTT) CTkTll OO: Cee 

ATTRIBUTE_NODE: 2 i 

CDATA_SECTION_NODE: 4 

COMMENT_NODE: & 

DOCUMENT_FRAGMENT_NODE: 11 

DOCUMENT_NODE: 9 

DOCUMENT_POSITION_CONTAINED_BY: 16 

DOCUMENT_POSITION_CONTAINS: & 

DOCUMENT_POSITION_DISCONNECTED: 1 

DOCUMENT_POSITION_FOLLOWING: 4 

DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC: 32 


TSTI7 7% 


Beverages 


© Coffee 
e Tea 
e Milk 


3 types of beverages 


MSDN about IE9 

MSDN: "Adding a <! DOCTYPE> pointing to an XHTML DTD does NOT 
influence whether a page is treated as HTML or XHTML. XHTML support 
for files on the web can only be triggered by the MIME type of the response 
from the web server. This is true both in IE9 and other browsers. This 


MIME type should be "application/xhtml+xml1" (though you can technically 
use any supported XML mime type). Local files with ".xht" or ".xhtm1" 
extensions will also be opened as XHTML". 


More on DOM access 
Document Object Model 


Further Reading 


HTMLS5 in action 
First chapter of Robert Crowther, Joe Lennon, and Ash Blue, HTMLS in 
Action, Manning, February 2014. Chapter 5; source code on github. 


Comparison to other technologies 
2011 - The Year HTML5 Won 


Dive into HTML 5 
on-line book by Mark Pilgrim; CC-BY-3.0; updated fork; published on 
paper by O’Reilly. 


Extended version of the template 
Module anonymous functions has an example where a button is added to 
the XHTML template given in this module. 


XHTMLS5 editor 
There are many editors for creating XHTMLS files. Netbeans for example 
may be used for this. 


On-line editor 
Mozilla thimble is an on-line editor for learning HTMLS. 


HTMLS5S please 
A web site with recommendations which HTMLS features are ready for use 
and under which conditions. 


HTMLS test 
This web site has a browser feature detection test as well as references to 
the W3C standard for every feature. 


Further reading specific topics 


Local storage 

HTMLS5 capable browsers have added a new local storage facility which 
allows to save data between subsequent visits of a web page. This feature is 
similar to cookies but with more storage capacity and it is better accessible. 


How to write a game 
A tutorial which shows http://html5center.sourceforge.net/how-to-write-a- 
brikbloc-game-with-htm15-svg-and-canvas 


More links 


Presentation 
http://tantek.com/presentations/2011/10/html5-now/ (written in HTML 5) 


Specifications 
http://www.w3.org/TR/html5/ and http://www.whatwg.org/specs/web- 


Microsoft Internet Explorer 9 

Microsoft Internet Explorer 9 was released in March 2011. It adopted 
HTMLS to a large part, something other browser implementations had done 
before. Learn HTML5 (Internet Explorer Developer Center). IE9 Developer 
Tools. More about JE9 and XHTML. 


Differences from HTML4 
http://dev.w3.org/htm15/html4-differences/ 


Mozilla Developer Network 
HTMLS5 start page 


IBM developerWorks 
HTML 5 fundamentals 


modernizr 
http://www.modernizr.com/. Modernizr is a JavaScript library which helps 
to detect if a HTML5 feature is supported in a web browser or not. 


How well does a browser support HTML5? 
https://html5test.com/ 


